/**
* Created by wl
* 基金储备库-编辑管理团队信息
*/
<template>
    <div>
        <div class="ca-title">
            <div class="el-right">
                <el-button type="primary" size="small" @click="save">保存</el-button>
                <el-button @click="close" size="small">取消</el-button>
            </div>
        </div>
        <el-form ref="itemInfoRule" class="ca-table-add-reduce ca-m-t-15" :model="itemInfo">
            <el-table
                :data='itemInfo.itemHoldHighManagerEntities'
                @header-click="add"
                class="ca-table table_p_01 el-wid-100"
                >
                <el-table-column
                    label="姓名"
                    prop="userName"
                    width="100px">
                    <template slot-scope="scope">
                        <el-input type="text" v-model="scope.row.userName" :maxlength="100"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    label="性别"
                    prop="sex"
                    width="120px">
                    <template slot-scope="scope">
                       <el-select v-model="scope.row.sex" placeholder="请选择">
                            <el-option
                            v-for="(item, index) in sex"
                            :key="index"
                            :label="item.sex"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column
                    label="出生年月"
                    prop="birthday"
                    width="130px">
                    <template slot-scope="scope">
                        <el-date-picker
                            v-model="scope.row.birthday"
                            type="date"
                            placeholder="选择日期"
                            style="width:100%">
                        </el-date-picker>
                    </template>
                </el-table-column>
                <el-table-column
                    label="公司职务"
                    prop="duties"
                    width="100px">
                    <template slot-scope="scope">
                        <el-input type="text" v-model="scope.row.duties" :maxlength="100"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    label="学历"
                    prop="education"
                    width="100px">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.education" style="width: 100%;">
                            <el-option label="请选择" value=''></el-option>
                            <el-option
                            v-for="item in education"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            ></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column
                    label="专业"
                    prop="major"
                    width="100px">
                    <template slot-scope="scope">
                        <el-input type="text" v-model="scope.row.major" :maxlength="100"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="school"
                    label="毕业院校"
                    align="center"
                    width="100px">
                    <template slot-scope="scope">
                        <el-input type="text" v-model="scope.row.school" :maxlength="100"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="jobTime"
                    label="在职时间"
                    align="center"
                    width="100px">
                    <template slot-scope="scope">
                        <el-input type="text" v-model="scope.row.jobTime" :maxlength="100"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="role"
                    label="团队内角色"
                    align="center"
                    width="100px">
                    <template slot-scope="scope">
                        <el-input type="text" v-model="scope.row.role" :maxlength="100"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    label="在管基金数量"
                    align="center"
                    width="100px">
                    <template slot-scope="scope">
                        <el-button type="text" @click="showDialog(scope.row.fundList)">{{scope.row.fundList.length}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column
                    label="备注"
                    prop="remarks"
                    width="130px">
                    <template slot-scope="scope">
                        <el-input type="textarea" v-model="scope.row.remarks" :rows="2" resize="none" :maxlength="100"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="+"
                        label-class-name="add-button"
                        width="120px">
                        <template slot-scope="scope">
                            <el-row>
                                <el-col :span='18'>
                                    <el-button type="text" @click="showDialogEdit(scope.row.fundList, scope.$index)">在管基金编辑</el-button>
                                </el-col>
                                <el-col :span='6'>
                                    <el-button type="text" @click="delExecutive(scope.row.id,scope.$index)">删除</el-button>
                                </el-col>
                            </el-row>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 编辑在管基金 -->
            <el-form ref="fundInfoEdit" class="ca-table-add-reduce">
                <el-dialog
                    title="在管基金"
                    :visible.sync="dialogVisibleEdit"
                    class="ca-table-add-reduce ca-m-t-15"
                    :show-close="false"
                    :close-on-click-modal="false"
                    width="80%">
                    <el-table
                    :data='editFundList.fundItemInfo'
                    @header-click="addFund"
                    class="ca-table table_p_01 el-wid-100"
                    >
                    <el-table-column
                        label="基金名称"
                        prop="fundName"
                        width="100px">
                        <template slot-scope="scope">
                            <el-input type="text" v-model="scope.row.fundName" :maxlength="100"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="注册地"
                        prop="address"
                        width="120px">
                        <template slot-scope="scope">
                            <el-input type="text" v-model="scope.row.address" :maxlength="100"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="scale"
                        label="基金规模</br>（万元）"
                        :render-header="renderTitle"
                        align="center">
                        <template slot-scope="scope">
                            <el-input type="text" v-model="scope.row.scale" :maxlength="100"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="paid"
                        label="实缴资本</br>（万元）"
                        :render-header="renderTitle"
                        align="center">
                        <template slot-scope="scope">
                            <el-input type="text" v-model="scope.row.paid" :maxlength="100"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="投资领域"
                        prop="field"
                        width="100px">
                        <template slot-scope="scope">
                            <el-input type="text" v-model="scope.row.field" :maxlength="100"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="投资阶段"
                        prop="stage"
                        width="100px">
                        <template slot-scope="scope">
                            <el-input type="text" v-model="scope.row.stage" :maxlength="100"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="investmentNumber"
                        label="投资项目数量"
                        align="center"
                        width="100px">
                        <template slot-scope="scope">
                            <el-input type="text" v-model="scope.row.investmentNumber" :maxlength="100"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="investmentMoney"
                        label="投资金额</br>（万元）"
                        :render-header="renderTitle"
                        align="center"
                        width="100px">
                        <template slot-scope="scope">
                            <el-input type="text" v-model="scope.row.investmentMoney" :maxlength="100"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="exitNumber"
                        label="退出项目数量"
                        align="center"
                        width="100px">
                        <template slot-scope="scope">
                            <el-input type="text" v-model="scope.row.exitNumber" :maxlength="100"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="exitMoney"
                        label="退出金额</br>（万元）"
                        :render-header="renderTitle"
                        align="center"
                        width="100px">
                        <template slot-scope="scope">
                            <el-input type="text" v-model="scope.row.exitMoney" :maxlength="100"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="irr"
                        label="irr"
                        align="center"
                        width="100px">
                        <template slot-scope="scope">
                            <el-input type="text" v-model="scope.row.irr" :maxlength="100"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="备注"
                        prop="remarks"
                        width="130px">
                        <template slot-scope="scope">
                            <el-input type="textarea" v-model="scope.row.remarks" :rows="2" resize="none" :maxlength="100"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="+"
                            label-class-name="add-fundButton"
                            width="120px">
                            <template slot-scope="scope">
                                <el-button type="text" @click="delFund(scope.row.id,scope.$index)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <span slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="saveFund">保存</el-button>
                    </span>
                </el-dialog>
            </el-form>
            <!-- 查看在管基金 -->
            <el-dialog
                title="在管基金"
                :visible.sync="dialogVisible"
                width="80%">
                <el-table
                    :data='checkFundList'
                    class="ca-table table_p_01 el-wid-100"
                    >
                    <el-table-column
                        label="基金名称"
                        prop="fundName"
                        width="100px">
                        <template slot-scope="scope">
                            <el-tooltip effect="dark" :content="scope.row.fundName" placement="top" v-if="scope.row.fundName">
                                <el-button type="text" class="ca-notes ca-text-over-flow-ellipsis">{{scope.row.fundName}}</el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="注册地"
                        prop="address"
                        width="120px">
                        <template slot-scope="scope">
                            <el-tooltip effect="dark" :content="scope.row.address" placement="top" v-if="scope.row.address">
                                <el-button type="text" class="ca-notes ca-text-over-flow-ellipsis">{{scope.row.address}}</el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="scale"
                        label="基金规模</br>（万元）"
                        :render-header="renderTitle"
                        align="center">
                        <template slot-scope="scope">
                            <el-tooltip effect="dark" :content="scope.row.scale" placement="top" v-if="scope.row.scale">
                                <el-button type="text" class="ca-notes ca-text-over-flow-ellipsis">{{scope.row.scale}}</el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="paid"
                        label="实缴资本</br>（万元）"
                        :render-header="renderTitle"
                        align="center">
                        <template slot-scope="scope">
                            <el-tooltip effect="dark" :content="scope.row.paid" placement="top" v-if="scope.row.paid">
                                <el-button type="text" class="ca-notes ca-text-over-flow-ellipsis">{{scope.row.paid}}</el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="投资领域"
                        prop="field"
                        width="100px">
                        <template slot-scope="scope">
                            <el-tooltip effect="dark" :content="scope.row.field" placement="top" v-if="scope.row.field">
                                <el-button type="text" class="ca-notes ca-text-over-flow-ellipsis">{{scope.row.field}}</el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="投资阶段"
                        prop="stage"
                        width="100px">
                        <template slot-scope="scope">
                            <el-tooltip effect="dark" :content="scope.row.stage" placement="top" v-if="scope.row.stage">
                                <el-button type="text" class="ca-notes ca-text-over-flow-ellipsis">{{scope.row.stage}}</el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="investmentNumber"
                        label="投资项目数量"
                        align="center"
                        width="100px">
                        <template slot-scope="scope">
                            <el-tooltip effect="dark" :content="scope.row.investmentNumber" placement="top" v-if="scope.row.investmentNumber">
                                <el-button type="text" class="ca-notes ca-text-over-flow-ellipsis">{{scope.row.investmentNumber}}</el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="investmentMoney"
                        label="投资金额</br>（万元）"
                        :render-header="renderTitle"
                        align="center"
                        width="100px">
                        <template slot-scope="scope">
                            <el-tooltip effect="dark" :content="scope.row.investmentMoney" placement="top" v-if="scope.row.investmentMoney">
                                <el-button type="text" class="ca-notes ca-text-over-flow-ellipsis">{{scope.row.investmentMoney}}</el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="exitNumber"
                        label="退出项目数量"
                        align="center"
                        width="100px">
                        <template slot-scope="scope">
                            <el-tooltip effect="dark" :content="scope.row.exitNumber" placement="top" v-if="scope.row.exitNumber">
                                <el-button type="text" class="ca-notes ca-text-over-flow-ellipsis">{{scope.row.exitNumber}}</el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="exitMoney"
                        label="退出金额</br>（万元）"
                        :render-header="renderTitle"
                        align="center"
                        width="100px">
                        <template slot-scope="scope">
                            <el-tooltip effect="dark" :content="scope.row.exitMoney" placement="top" v-if="scope.row.exitMoney">
                                <el-button type="text" class="ca-notes ca-text-over-flow-ellipsis">{{scope.row.exitMoney}}</el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="irr"
                        label="irr"
                        align="center"
                        width="100px">
                        <template slot-scope="scope">
                            <el-tooltip effect="dark" :content="scope.row.irr" placement="top" v-if="scope.row.irr">
                                <el-button type="text" class="ca-notes ca-text-over-flow-ellipsis">{{scope.row.irr}}</el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="备注"
                        prop="remarks"
                        width="130px">
                        <template slot-scope="scope">
                            <el-tooltip class="item" effect="dark" :content="scope.row.remarks" placement="top" v-if="scope.row.remarks">
                                <el-button type="text" class="ca-notes ca-text-over-flow-ellipsis">{{scope.row.remarks}}</el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
        </el-form>
    </div>
</template>
<script type="text/ecmascript-6">
    import {api} from '../../api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    export default {
        data() {
            return {
                dialogVisible: false,
                dialogVisibleEdit: false,
                ind: null, //编辑的在管基金下标
                value: '',
                sex: [
                    {
                        id: 0,
                        sex: '男'
                    },
                    {
                        id: 1,
                        sex: '女'
                    }
                ],
                executivesList: {
                    birthday: '', //出生年月
                    duties: '', //公司职务
                    education: '', //学历
                    fundId: this.$route.params.itemId,
                    fundList: [], //在管基金
                    id: '',
                    jobTime: '', //在职时间
                    major: '', //专业
                    remarks: '', //备注
                    role: '', //团队内角色
                    school: '', //毕业院校
                    sex: 0, //性别
                    userName: '' //姓名
                }, //信息列表
                itemInfo: {
                    itemHoldHighManagerEntities: [],
                },
                // 在管基金信息
                fundInfo: {
                    address: '', //注册地
                    businessId: '', // 基金详情页--管理团队id
                    exitMoney: '', //退出金额
                    exitNumber: '', //退出项目数量
                    field: '', //投资领域
                    fundName: '', //基金名称
                    id: '',
                    investmentMoney: '', //投资金额
                    investmentNumber: '', //投资项目数量
                    irr: '',
                    paid: '', //实缴资本
                    remarks: '', //备注
                    scale: '', //基金规模
                    stage: '' //投资阶段
                },
                checkFundList: [], //查看在管基金
                editFundList: {
                    fundItemInfo: []
                },
                education: this.$store.state.user.dictionaryMap.education, //学历
            }
        },
        watch: {
        },
        props: {
        },
        mounted() {
            this.getInfo()
        },
        methods: {
            close() {
                this.$emit('close')
            },
            showDialog(fundList) {
                this.dialogVisible = true
                this.dialogVisibleEdit = false
                this.checkFundList = fundList
            },
            showDialogEdit(fundList, index) {
                this.ind = index
                this.dialogVisibleEdit = true
                this.dialogVisible = false
                this.editFundList.fundItemInfo = fundList
            },
            // 添加管理团队
            add(column) {
                if (column.labelClassName === 'add-button') {
                   let obj = JSON.parse(JSON.stringify(this.executivesList))
                    this.itemInfo.itemHoldHighManagerEntities.push(Object.assign({}, obj));
                }
            },
            // 添加在管基金
            addFund(column) {
                if (column.labelClassName === 'add-fundButton') {
                    this.itemInfo.itemHoldHighManagerEntities[this.ind].fundList.push(Object.assign({}, this.fundInfo));
                }
            },
            // 删除在管基金
            delFund(id, index) {
                let that = this
                this.$confirm('确定要删除此信息吗?', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning'
                }).then(function () {
                    //删除操作
                    if (id) {
                        apiHttp(api.DELETE_FUND, {id: id}).then(ret => {
                            if (ret.resCode === STATUS_HTTP_SUCCESS) {
                                that.$message({
                                    message: '数据删除成功！',
                                    type: 'success',
                                    center: true
                                });
                                that.itemInfo.itemHoldHighManagerEntities[that.ind].fundList.splice(index, 1)
                            }
                        })
                    } else {
                        that.itemInfo.itemHoldHighManagerEntities[that.ind].fundList.splice(index, 1)
                        that.$message({
                            message: '修改成功！',
                            type: 'success',
                            center: true
                        });
                    }
                })
            },
            // 保存在管基金
            saveFund() {
                let flagFund = false
                if (this.itemInfo.itemHoldHighManagerEntities[this.ind].fundList.length > 0) {
                    this.itemInfo.itemHoldHighManagerEntities[this.ind].fundList.map(item => {
                        if (!item.fundName) {
                            flagFund = false;
                            this.$message({
                                message: '请输入基金名称',
                                type: 'error',
                                center: true
                            });
                            return false;
                        } else {
                            flagFund = true;
                        }
                    })
                } else {
                    flagFund = true
                }
                if (flagFund) {
                    this.dialogVisibleEdit = false;
                }
            },
            // 删除管理团队
            delExecutive(id, index) {
                let that = this
                this.$confirm('确定要删除此信息吗?', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning'
                }).then(function () {
                    //删除操作
                    if (id) {
                        apiHttp(api.DELETE_TEAMINFO, {id: id}).then(ret => {
                            if (ret.resCode === STATUS_HTTP_SUCCESS) {
                                that.$message({
                                    message: '数据删除成功！',
                                    type: 'success',
                                    center: true
                                });
                                that.itemInfo.itemHoldHighManagerEntities.splice(index, 1)
                            }
                        })
                    } else {
                        that.itemInfo.itemHoldHighManagerEntities.splice(index, 1)
                        that.$message({
                            message: '修改成功！',
                            type: 'success',
                            center: true
                        });
                    }
                })
            },
            // 保存
            save() {
                let flag = false;
                if (this.itemInfo.itemHoldHighManagerEntities.length > 0) {
                    this.itemInfo.itemHoldHighManagerEntities.map(item => {
                        if (!item.userName) {
                            flag = false;
                            this.$message({
                                message: '请输入姓名',
                                type: 'error',
                                center: true
                            });
                            return false;
                        } else {
                            flag = true;
                        }
                    })
                } else {
                    flag = true
                }
                if (flag) {
                    apiHttp(api.SAVE_TEAMINFO, this.itemInfo.itemHoldHighManagerEntities).then(ret=> {
                        if (ret.resCode === STATUS_HTTP_SUCCESS) {
                            this.$message({
                                message: '修改成功！',
                                type: 'success',
                                center: true
                            });
                            this.$emit('update')
                        }
                    })
                }
            },
            getInfo() {
                apiHttp(api.CHECK_TEAMINFO, {id: this.$route.params.itemId}).then(ret=> {
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        this.itemInfo.itemHoldHighManagerEntities = ret.data
                    }
                })
            },
        },
        components: {
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-right {
    float: right;
}
.el-size {
    font-size: 30px;
}
.input-mid {
    display: table-cell;
    vertical-align: middle;
}
.btn-min {
    display: table-cell;
    vertical-align: middle;
    cursor: pointer;
}
table td{
    padding: 5px 5px;
    box-sizing: border-box;
}
.el-form-item {
    margin-bottom: 0px;
}
.ca-table th {
    line-height: 20px;
}
.addBtn{
    color: red !important;
}
.addFundBtn{
    color: red !important;
}
.ca-notes {
    color: #666;
}
</style>